<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Regular.js • TODO-MVC</title>
  <link rel="stylesheet" href="https://rawgit.com/tastejs/todomvc-common/v0.1.11/base.css">
  <script src="../../dist/regular.js"></script>
</head>
<body>
  <div id="todoapp"></div>
  <footer id="info">
        <p>Double-click to edit a todo</p>
        <p>Created by @leeluolee</a></p>
        <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
  </footer>
  <script id="todo" type="template/regular" name="todo">
    <li  r-class={ {'completed': todo.completed, 'editing': todo.editing} }>
      <div class="view">
        <input class="toggle" type="checkbox" r-model={ todo.completed }>
        <label on-dblclick={todo.editin  = true}>{ todo.description }</label>
        <button on-click={ this.$emit('remove', todo_index) } class="destroy"></button>
      </div>
      <input id="edit" class="edit" on-enter={ todo.editing = false } r-model={todo.description} autofocus>
    </li>
  </script>

  <script id="application" type="template/regular">
    <div>
      <h1>regular-todo</h1>
      <input id="new-todo" on-enter={ this.newTodo(editTodo) } placeholder="What needs to be done?" r-model={ editTodo }>
    </div>
    {#if !!items.length}
      <section id="main">
        <input id="toggle-all" type="checkbox" name='toggle' r-model={items| every: 'completed', items}>
        <label for="toggle-all">Mark all as complete</label>
        <ul id="todo-list">
          {#list this.getList(filter) as i}
            <todo todo={i} on-remove={this.remove(i_index)} />
          {/list}
        </ul>
      </section>
      <footer id="footer">
        <span id="todo-count">
          <strong>{ this.getList('active').length }</strong> { this.getList('active').length === 1 ? 'item' : 'items' } left
        </span>
        <ul id="filters">
          <li><a r-class={ {selected: filter === 'all'} }  href="javascript:;" on-click={filter = 'all'}>All</a></li>
          <li><a r-class={ {selected: filter === 'active'} }  href='javascript:;' on-click={filter = 'active'}>Active</a></li>
          <li><a r-class={ {selected: filter === 'completed'} }  href="javascript:;" on-click={filter = 'completed'}>Completed</a></li>
        </ul>
        {#if this.getList('completed').length > 0 }
          <button id="clear-completed" on-click={this.clearCompleted()}>Clear completed ({ this.getList('completed').length })</button>
        {/if}
      </footer>
    {/if}
  </script>

  <script>
    // on-enter event
    Regular.event('enter', function(elem, fire){
      function update(ev){
        if(ev.which == 13){ // ENTER key
          ev.preventDefault();
          fire(ev); // if key is enter , we fire the event;
        }
      }
      Regular.dom.on(elem, "keypress", update);
      return function destroy(){ // return a destroy function
        Regular.dom.off(elem, "keypress", update);
      }
    });

    var Todo = Regular.extend({
      data: {},
      template: "#todo",
      init: function(){}
    });
    

    var TodoApp = Regular.extend({
      template: '#application', // id | template string | preparsed ast
      init: function(){
        // call parent.init function ()
        // this.supr();
        var data = this.data;
        // localStorage
        if(window.localStorage){
          this.$on('update', function(){
            localStorage.setItem('items',JSON.stringify(this.data.items))
          })
        }
      },
      // get the list;
      getList: function(filter){
        if(!filter || filter === 'all') return this.data.items;
        else return this.data.items.filter(function(item){
          return filter === 'completed'? item.completed : !item.completed;
        });
      },
      // toggle all todo's completed state
      toggleAll: function(sign){
        this.data.items.forEach(function(item){
          return item.completed = !sign;
        });
      },
      // clear all compleled
      clearCompleted: function(){
        this.data.items = this.data.items.filter(function(item){
          return !item.completed
        });
      },
      // create a new todo
      newTodo: function(editTodo){
        var data = this.data;
        data.items.unshift({description: editTodo});
        data.editTodo = "";
        console.log("asdf")
      },
      // remove a todo
      remove: function(index){
        this.data.items.splice(index,1); 
      }
    }).filter({
      every: {
        get: function(value, key){
          return value.filter(function(item){
            return item[key] 
          }).length === value.length
        },
        set: function(value, key, items){
          items.forEach(function(item){
            item[key] = value
          })
          return items
        }
      }
    })

    // localStorage stuff
    if(window.localStorage && window.JSON){
      var items = localStorage && localStorage.getItem('items');
      items = JSON.parse(items);
    }

    var todo = new TodoApp({data: {
      filter:"all",
      items: items || []
    }});

    todo.$inject('#todoapp')
  </script>
</body>
</html>